<template>
  <div class="app-car-container">
    <CustomContent>
      <template v-slot:body>
        <div>
          <el-form ref="form" :model="form" label-width="140px" :rules="rules">
            <template>
              <el-row :gutter="10">
                <el-col :span="6">
                  <mmv-title title="公司信息"></mmv-title>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="公司名称:" required prop="name">
                    <el-input v-model="form.name" placeholder="请输入公司名称" maxlength="50"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
            <template>
              <el-row :gutter="10">
                <el-col :span="6">
                  <mmv-title title="签章管理员信息"></mmv-title>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="管理员类型:" required prop="contactsType">
                    <el-radio-group v-model="form.contactsType">
                      <el-radio :label="1">法人</el-radio>
                      <el-radio :label="2">代理人</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :push="2">
                  <el-form-item label="管理员姓名:" required prop="contacts">
                    <el-input v-model="form.contacts" placeholder="请输入管理员姓名" maxlength="10"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="地址:" required prop="address">
                    <el-input v-model="form.address" placeholder="请输入管理员地址" maxlength="100"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :push="2">
                  <el-form-item label="电话:" required prop="phoneNumber">
                    <el-input v-model="form.phoneNumber" placeholder="请输入管理员电话" maxlength="11"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="证件类型:" required prop="idType">
                    <el-select style="width: 100%" v-model="form.idType" placeholder="请选择证件类型">
                      <el-option label="身份证" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :push="2">
                  <el-form-item label="证件号码:" required prop="idNumber">
                    <el-input v-model="form.idNumber" placeholder="请输入证件号码" maxlength="18"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
            <template>
              <el-row :gutter="10">
                <el-col :span="6">
                  <mmv-title title="公司信息"></mmv-title>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="法人:" required prop="legalPerson">
                    <el-input v-model="form.legalPerson" placeholder="请输入法人"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :push="2">
                  <el-form-item label="公司邮箱:" required prop="mailbox">
                    <el-input v-model="form.mailbox" placeholder="请输入公司邮箱"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="对公账号:" required prop="bankAccount">
                    <el-input v-model="form.bankAccount" placeholder="请输入对公账号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :push="2">
                  <el-form-item label="开户银行:" required prop="bankName">
                    <el-input v-model="form.bankName" placeholder="请输入开户银行"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="开户支行:" required prop="branchBankName">
                    <el-input v-model="form.branchBankName" placeholder="请输入开户支行"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" :push="2">
                  <el-form-item label="统一社会信用代码:" required prop="unifiedSocialCreditCode">
                    <el-input v-model="form.unifiedSocialCreditCode" placeholder="请输入统一社会信用代码" maxlength="18"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8" v-if="false">
                  <el-form-item label="签章类型:" required prop="signatureMethod">
                    <el-radio-group v-model="form.signatureMethod">
                      <el-radio :label="1">自动签章</el-radio>
                      <el-radio :label="2">手动签章</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="印章内容:" required prop="localSeal">
                    <el-input type="textarea" placeholder="请输入印章内容" v-model="form.localSeal"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </template>

          </el-form>
        </div>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="primary" :loading="loading" @click.native="saveAdd">确认</el-button>
          <el-button type="info" plain @click.native="close">取消</el-button>
        </div>
      </template>

    </CustomContent>

  </div>
</template>

<script>
import CustomContent from '@/components/custom/content.vue'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import * as contractApi from "@/api/contract/enterpriseCertification";

export default {
  components: {MmvTitle, CustomContent},
  props: {},
  data() {
    // 这里存放数据
    return {
      viewType: 0,//页面类型 0:新增 1:编辑
      loading: false,
      form: {
        name: '',
        contactsType: 1,
        contacts: '',
        address: '',
        phoneNumber: '',
        idType: 1,
        idNumber: '',
        legalPerson: '',
        mailbox: '',
        bankAccount: '',
        bankName: '',
        branchBankName: '',
        unifiedSocialCreditCode: '',
        localSeal: '',
        signatureMethod: 2
      },

      rules: {
        name: [
          {required: true, message: '请输入公司名称', trigger: 'blur'}
        ],
        contacts: [
          {required: true, message: '请输入管理员名称', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入管理员地址', trigger: 'blur'}
        ],
        phoneNumber: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: '手机号格式有误',
            trigger: 'blur',
          },
        ],
        idNumber: [
          {required: true, message: '请输入身份证号', trigger: 'blur'},
          {
            pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0\d|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,
            message: '身份证号格式有误',
            trigger: 'blur'
          }

        ],
        legalPerson: [
          {required: true, message: '请输入法人', trigger: 'blur'}
        ],
        mailbox: [
          {required: true, message: '请输入公司邮箱', trigger: 'blur'},
          {
            pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
            message: '邮箱格式有误',
            trigger: 'blur'
          }
        ],
        bankAccount: [
          {required: true, message: '请输入对公账号', trigger: 'blur'},
        ],
        bankName: [
          {required: true, message: '请输入开户银行', trigger: 'blur'}
        ],
        branchBankName: [
          {required: true, message: '请输入开户支行', trigger: 'blur'}
        ],
        unifiedSocialCreditCode: [
          {required: true, message: '请输入统一社会信用代码', trigger: 'blur'}
          // {
          //   pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
          //   message: '统一社会信用代码格式有误',
          //   trigger: 'blur'
          // }
        ],
        localSeal: [
          {required: true, message: '请输入印章内容', trigger: 'blur'}
        ]

      }

    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 方法集合
  methods: {
    saveAdd() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$alert('确定保存企业吗?', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              if (action == 'confirm') {
                if (this.viewType == 1) {
                  contractApi.edit(this.form).then(res => {
                    this.$message({
                      type: 'success',
                      message: '编辑成功'
                    });
                    this.close();
                  })
                } else {
                  contractApi.add(this.form).then(res => {
                    this.$message({
                      type: 'success',
                      message: '新增成功'
                    });
                    this.close();
                  })
                }

              }
            }
          });
        }
      })
    },
    close() {
      this.$router.back();
    },
    getDetail() {
      contractApi.detail(this.$route.query.id).then(res => {
        this.form = res.data;
        this.form.contactsType = Number(this.form.contactsType);
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
    this.viewType = this.$route.query.type;

    if (this.viewType == 1) {//编辑
      this.$route.meta.title='编辑企业认证'
      this.getDetail();
    }
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },

}
</script>

<style lang="scss" scoped>
</style>
